<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="card-body">
        <avue-crud :data="tableData"
                   :option="option"
                   :page="page"
                   :table-loading="tableLoading"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @search-change="searchChange"
                   @search-reset="searchReset">
          <template slot-scope="scope"
                    slot="menuLeft">
            <el-button type="primary"
                       icon="el-icon-plus"
                       size="small"
                       @click.stop="protocolAdd()">创建</el-button>
          </template>
          <template slot-scope="scope"
                    slot="menu">
            <div class="menu-title"
                 @click.stop="commitList(scope.row,scope.index)"
                 v-if="scope.row.state == '0'">
              <i class="iconfont iconview icon-primary"></i>
              <p class="menu-title-text">提交</p>
            </div>
            <div class="menu-title"
                 @click.stop="editList(scope.row,scope.index)"
                 v-if="scope.row.state == '0'">
              <i class="iconfont iconalter icon-warning"></i>
              <p class="menu-title-text">编辑</p>
            </div>
          </template>
        </avue-crud>

        <el-dialog title="提示"
                   :visible.sync="dialogVisible"
                   width="30%"
                   :before-close="handleClose">
          <span>请确认提交</span>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="commitYes">确 定</el-button>
          </span>
        </el-dialog>

      </div>
    </div>
  </basic-container>
</template>
<script>
import { projectRegister } from "@/api/planning/project";
import { getProtocolList } from "@/api/planning/detailList";
import { commitList } from "@/api/planning/detailList";

export default {
  name: "register",
  created () {
    this.getProtocolList(this.page);
    window.listdetail = this.listdetail;
  },
  data () {
    return {
      rowDatatemo: [null],
      dialogVisible: false,
      headerData: {
        title: '报批清单拟定',
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableData: [],
      option: {
        page: true,
        addBtn: false,
        editBtn: false,
        indexLabel: "序号",
        index: true,
        indexWidth:70,
        cellBtn: false,
        delBtn: false,
        columnBtn: false,
        searchBtn: false,
        refreshBtn: false,
        filterBtn: false,
        menuWidth: 100,
        keyId: "id",
        column: [{
          label: "清单编号",
          prop: "code",
          width: 150,
          cell: true
        },
        {
          label: "清单名称",
          prop: "title",
          //              search:true,
          cell: true,
          formatter: function (row, value, label, column) {
            return '<a style="cursor: pointer;" onclick="listdetail(\'' + row.id + '\')">' + value + '</a>';
          },
        },
        {
          label: "清单名称",
          prop: "titleLike",
          search: true,
          cell: false,
          hide: true,
          formatter: function (row, value, label, column) {
            return '<a style="cursor: pointer;" onclick="listdetail(\'' + row.id + '\')">' + value + '</a>';
          },
        },

        {
          label: "清单说明",
          width: 300,
          prop: "description",
          cell: true
        },
        {
          label: "状态",
          prop: "state",
          width: 100,
          type: "select",
          dicData: [
            {
              label: "未提交",
              value: "0"
            },
            {
              label: "已提交",
              value: "1"
            },
          ],
          cell: true
        }
        ]
      },
      tableLoading: false,
      titleLikes: '',
    };
  },
  methods: {
    getProtocolList (page, params) {
      this.tableLoading = true;
      getProtocolList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params)).then(response => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false
      })
    },
    /**
     * 重置回调
     */
    searchReset() {
      this.titleLikes = '';
      let params = {
        titleLike:this.titleLikes,
      };
      this.getProtocolList(this.page,params);
    },

    //搜索回调
    searchChange (params) {
      this.page.currentPage = 1
      this.getProtocolList(this.page, this.dealSearchParam(params))
    },
    // 处理搜索过滤
    dealSearchParam (params) {
      if (params.titleLike) {
        params.titleLike = params.titleLike;
      } else {
        params.titleLike = ""
      }
      this.titleLikes = params.titleLike;
      return params;
    },
    currentChange (currentPage) {
      let page = this.page;
      page.currentPage = currentPage;
      let params = { titleLike: this.titleLikes };
      this.getProtocolList(page, params);
    },
    sizeChange (pageSize) {
      let page = this.page;
      page.pageSize = pageSize;
      let params = { titleLike: this.titleLikes };
      this.getProtocolList(page, params);
    },
    protocolAdd () {
      this.$router.push({ path: "/protocolAdd" });
    },
    // 清单拟定详情跳转
    listdetail (id) {
      let src = `/listdetail/detail/${id}`;
      this.$router.push({
        path: src
      });
    },

    commitList (row, index) {
      this.dialogVisible = true;
      this.rowDatatemo = row;
    },
    // 确定
    commitYes () {
      this.commitList1(this.rowDatatemo);
    },

    commitList1 (row) {
      commitList(row.id).then(response => {
        if (response.data.code == 0) {
          this.dialogVisible = false;
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
        }
        this.$router.go(0);
      })
    },
    // 清单拟定编辑跳转
    editList (row, index) {
      let src = `/listEdit/detail/` + row.taskId;
      this.$router.push({
        path: src,
        query: {
          //清单ID
          listId: row.id
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-card {
  .head-title {
    font-size: 1rem;
  }
}

/deep/.el-table {
  a {
    font-size: 1rem;
  }
}
.card-border {
  border: 1px solid #d2d2d2;
}

.card-header {
  background: #f5f5f5;
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  font-weight: 600;
}

.card-body {
  padding: 10px;
}

.menu-title {
  float: left;
  margin-right: 6px;
}

.menu-title-img {
  width: 25px;
  position: relative;
  top: 7px;
}

.menu-title-text {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  margin-left: 0.2rem;
}
/deep/.el-form-item__content {
  width: 50%;
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>
